<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    img {
      vertical-align: top;
    }

    .wrapAll {
      width: 600px;
      /* border: 1px solid #333; */
      margin: 50px auto;
      user-select: none;
    }

    .wrapAll .judgeBar {
      position: relative;
      overflow: hidden;
    }

    .wrapAll .judgeBar img {
      width: 100%;
      height: 264px;
    }

    .wrapAll .judgeBar .randBox {
      width: 50px;
      height: 50px;
      background-color: #fff;
      position: absolute;
      /* left: 300px;
            top: 150px; */
    }

    .wrapAll .judgeBar .followBox {
      width: 50px;
      height: 50px;
      background-color: #fff;
      position: absolute;
      /* left: 0px;
            top: 150px;
            background-image: url(../images/bg.jpg);
            background-repeat: no-repeat;

            background-size: 600px auto;
            background-position: -300px -150px; */
      z-index: 99;
    }

    .wrapAll .slideBar {
      width: 100%;
      height: 50px;
      border-radius: 25px;
      background-color: grey;
      margin-top: 10px;
      position: relative;
    }

    .wrapAll .slideBar .ball {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: pink;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>

<body>
  <!-- .wrapAll>(.judgeBar>img+.randBox+.followBox)+.slideBar>.ball    -->
  <div class="wrapAll">
    <div class="judgeBar">
      <img src="../images/bg.jpg">
      <div class="followBox"></div>
      <div class="randBox"></div>
    </div>
    <div class="slideBar">
      <div class="ball"></div>
    </div>
  </div>

</body>
<script>
  window.onload = function () {
    var wrapAll = document.getElementsByClassName("wrapAll")[0];

    var judgeBar = document.getElementsByClassName("judgeBar")[0];
    var followBox = document.getElementsByClassName("followBox")[0];
    var randBox = document.getElementsByClassName("randBox")[0];

    var slideBar = document.getElementsByClassName("slideBar")[0];
    var ball = document.getElementsByClassName("ball")[0];

    var maxLeft = slideBar.clientWidth - ball.clientWidth;

    var maxTop = judgeBar.clientHeight - randBox.clientHeight;
    console.log(maxTop);


    // 页面加载时随机位置   

    // 问题?
    // 页面加载时,如果图片没有加载完毕 是无法撑开父元素的高度的 => maxTop计算出现问题
    // 解决方法1: 提前给图片设置定宽 定高
    // 解决方法2: 等页面所有内容加载完毕之后在执行JS

    // x (200-maxLeft)
    var randX = 200 + Math.round(Math.random() * (maxLeft - 200));
    // y (50, maxTop-50)
    var randY = 50 + Math.round(Math.random() * (maxTop - 100));

    randBox.style.left = randX + "px";
    randBox.style.top = randY + "px";


    followBox.style.left = 0 + "px";
    followBox.style.top = randY + "px";

    // background-position: -300px -150px;
    // followBox.style.backgroundPosition = (-randX) + "px " + (-randY) + "px"; 
    // followBox.style.backgroundPosition = `-${randX}px -${randY}px`; 
    followBox.style.backgroundPositionX = (-randX) + "px";
    followBox.style.backgroundPositionY = (-randY) + "px";


    ball.onmousedown = function (e) {
      var e = e || window.event;
      var posX = e.offsetX;

      document.onmousemove = function (e) {
        var e = e || window.event;
        var x = e.pageX - posX - wrapAll.offsetLeft;

        if (x < 0) x = 0;
        if (x > maxLeft) x = maxLeft;

        ball.style.left = x + "px";
        followBox.style.left = x + "px";

      }
      document.onmouseup = function () {
        document.onmousemove = null;

        // 鼠标抬起时 验证两个盒子是否重叠  => followBox.offsetLeft  randBox.offsetLeft
        // 重叠    => 解锁成功
        // 不重叠  => 回到初始位置

        // 理想情况下  followBox.offsetLeft == randBox.offsetLeft =>对手残党不友好
        // 解决方法 设置误差允许范围    [randBox.offsetLeft-2,randBox.offsetLeft+2]

        if (followBox.offsetLeft >= randBox.offsetLeft - 2 && followBox.offsetLeft <= randBox.offsetLeft + 2) {
          location.href = "https://www.baidu.com";
        } else {
          ball.style.left = 0 + "px";
          followBox.style.left = 0 + "px";
        }

      }
    }
  }




</script>

</html>